TypeScript കോൺഫിഗറേഷൻ: TSConfig കംപൈലർ ഓപ്ഷനുകളിൽ പ്രാവീണ്യം നേടുക

ഏത് TypeScript പ്രോജക്റ്റിൻ്റെയും ഹൃദയമാണ് tsconfig.json ഫയൽ. TypeScript കംപൈലർ (tsc) നിങ്ങളുടെ .ts ഫയലുകളെ JavaScript-ലേക്ക് എങ്ങനെ മാറ്റണമെന്ന് ഇത് നിർദ്ദേശിക്കുന്നു. നന്നായി കോൺഫിഗർ ചെയ്ത tsconfig.json കോഡിന്റെ ഗുണനിലവാരം നിലനിർത്തുന്നതിനും വ്യത്യസ്ത പരിതസ്ഥിതികളിൽ അനുയോജ്യത ഉറപ്പാക്കുന്നതിനും നിർമ്മാണ പ്രക്രിയ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും നിർണായകമാണ്. ഈ സമഗ്ര ഗൈഡ് വിപുലമായ tsconfig.json ഓപ്ഷനുകളിലേക്ക് ആഴത്തിൽ ഇറങ്ങിച്ചെല്ലുന്നു, ഇത് നിങ്ങളുടെ TypeScript പ്രോജക്റ്റുകളെ മികച്ച പ്രകടനത്തിനും പരിപാലനത്തിനും വേണ്ടി മികച്ച രീതിയിൽ ട്യൂൺ ചെയ്യാൻ നിങ്ങളെ സഹായിക്കുന്നു.

അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുക: എന്തുകൊണ്ട് TSConfig പ്രധാനമാണ്

വിപുലമായ ഓപ്ഷനുകളിലേക്ക് കടക്കുന്നതിനുമുമ്പ്, tsconfig.json എന്തുകൊണ്ട് പ്രധാനമാണെന്ന് നമുക്ക് ഓർമ്മിപ്പിക്കാം:

• കംപൈലേഷൻ നിയന്ത്രണം: നിങ്ങളുടെ പ്രോജക്റ്റിൽ ഏതൊക്കെ ഫയലുകൾ ഉൾപ്പെടുത്തണം, അവ എങ്ങനെ കംപൈൽ ചെയ്യണം എന്ന് ഇത് വ്യക്തമാക്കുന്നു.
• ടൈപ്പ് പരിശോധന: ടൈപ്പ് പരിശോധനയുടെ നിയമങ്ങളും കാഠിന്യവും ഇത് നിർവചിക്കുന്നു, ഇത് ഡെവലപ്‌മെൻ്റ് സൈക്കിളിൽ നേരത്തെ തന്നെ പിശകുകൾ കണ്ടെത്താൻ നിങ്ങളെ സഹായിക്കുന്നു.
• ഔട്ട്പുട്ട് നിയന്ത്രണം: ഇത് ടാർഗെറ്റ് JavaScript പതിപ്പ്, മൊഡ്യൂൾ സിസ്റ്റം, ഔട്ട്പുട്ട് ഡയറക്‌ടറി എന്നിവ നിർണ്ണയിക്കുന്നു.
• IDE സംയോജനം: കോഡ് പൂർത്തിയാക്കൽ, പിശക് ഹൈലൈറ്റ് ചെയ്യൽ, റീഫാക്‌ടറിംഗ് തുടങ്ങിയ ഫീച്ചറുകൾക്കായി IDE-കൾക്ക് (VS Code, WebStorm മുതലായവ) ഇത് വിലപ്പെട്ട വിവരങ്ങൾ നൽകുന്നു.

ഒരു tsconfig.json ഫയൽ ഇല്ലാതെ, TypeScript കംപൈലർ സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ ഉപയോഗിക്കും, ഇത് എല്ലാ പ്രോജക്റ്റുകൾക്കും അനുയോജ്യമല്ലായിരിക്കാം. ഇത് অপ্রত্যাশিত സ്വഭാവത്തിനും അനുയോജ്യത പ്രശ്നങ്ങൾക്കും ഒട്ടും മികച്ചതല്ലാത്ത ഡെവലപ്‌മെൻ്റ് അനുഭവത്തിനും കാരണമാകും.

നിങ്ങളുടെ TSConfig ഉണ്ടാക്കുന്നു: ഒരു ദ്രുത ആരംഭം

ഒരു tsconfig.json ഫയൽ ഉണ്ടാക്കാൻ, നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ റൂട്ട് ഡയറക്‌ടറിയിൽ താഴെ പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

            tsc --init
            

              
                Copy
              
            
          

ഇത് ചില പൊതുവായ ഓപ്ഷനുകളുള്ള ഒരു അടിസ്ഥാന tsconfig.json ഫയൽ ഉണ്ടാക്കും. നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ പ്രത്യേക ആവശ്യകതകൾ നിറവേറ്റുന്നതിനായി നിങ്ങൾക്ക് ഈ ഫയൽ ഇഷ്ടാനുസൃതമാക്കാം.

പ്രധാന കംപൈലർ ഓപ്ഷനുകൾ: വിശദമായ അവലോകനം

tsconfig.json ഫയലിൽ ഒരു compilerOptions ഒബ്ജക്റ്റ് അടങ്ങിയിരിക്കുന്നു, ഇവിടെയാണ് നിങ്ങൾ TypeScript കംപൈലർ കോൺഫിഗർ ചെയ്യുന്നത്. ഏറ്റവും പ്രധാനപ്പെട്ടതും സാധാരണയായി ഉപയോഗിക്കുന്നതുമായ ചില ഓപ്ഷനുകൾ നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം:

target

കംപൈൽ ചെയ്ത JavaScript കോഡിനായുള്ള ECMAScript ടാർഗെറ്റ് പതിപ്പ് ഈ ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. ടാർഗെറ്റ് പരിതസ്ഥിതിയുമായുള്ള (ഉദാഹരണത്തിന്, ബ്രൗസറുകൾ, Node.js) അനുയോജ്യത ഉറപ്പാക്കിക്കൊണ്ട് കംപൈലർ ഉപയോഗിക്കുന്ന JavaScript ഫീച്ചറുകൾ ഇത് നിർണ്ണയിക്കുന്നു. പൊതുവായ മൂല്യങ്ങളിൽ ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext എന്നിവ ഉൾപ്പെടുന്നു. ESNext ഉപയോഗിക്കുന്നത് ഏറ്റവും പുതിയ പിന്തുണയുള്ള ECMAScript ഫീച്ചറുകളെ ലക്ഷ്യമിടും.

ഉദാഹരണം:

            "compilerOptions": {
  "target": "ES2020"
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ ECMAScript 2020-ന് അനുയോജ്യമായ JavaScript കോഡ് നിർമ്മിക്കാൻ കംപൈലറെ പഠിപ്പിക്കും.

module

കംപൈൽ ചെയ്ത JavaScript കോഡിൽ ഉപയോഗിക്കേണ്ട മൊഡ്യൂൾ സിസ്റ്റം ഈ ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. പൊതുവായ മൂല്യങ്ങളിൽ CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020, കൂടാതെ ESNext എന്നിവ ഉൾപ്പെടുന്നു. മൊഡ്യൂൾ സിസ്റ്റത്തിൻ്റെ തിരഞ്ഞെടുപ്പ് ടാർഗെറ്റ് പരിതസ്ഥിതിയെയും ഉപയോഗിക്കുന്ന മൊഡ്യൂൾ ലോഡറെയും ആശ്രയിച്ചിരിക്കുന്നു (ഉദാഹരണത്തിന്, Node.js, Webpack, Browserify).

ഉദാഹരണം:

            "compilerOptions": {
  "module": "CommonJS"
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ Node.js പ്രോജക്റ്റുകൾക്ക് അനുയോജ്യമാണ്, ഇത് സാധാരണയായി CommonJS മൊഡ്യൂൾ സിസ്റ്റം ഉപയോഗിക്കുന്നു.

lib

കംപൈലേഷൻ പ്രക്രിയയിൽ ഉൾപ്പെടുത്തേണ്ട ലൈബ്രറി ഫയലുകളുടെ കൂട്ടം ഈ ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. ഈ ലൈബ്രറി ഫയലുകൾ ബിൽറ്റ്-ഇൻ JavaScript API-കൾക്കും ബ്രൗസർ API-കൾക്കുമുള്ള ടൈപ്പ് നിർവചനങ്ങൾ നൽകുന്നു. പൊതുവായ മൂല്യങ്ങളിൽ ES5, ES6, ES7, DOM, WebWorker, ScriptHost എന്നിവയും അതിൽ കൂടുതലും ഉൾപ്പെടുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "lib": ["ES2020", "DOM"]
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷനിൽ ECMAScript 2020-നുള്ള ടൈപ്പ് നിർവചനങ്ങളും DOM API-യും ഉൾപ്പെടുന്നു, ഇത് ബ്രൗസർ അടിസ്ഥാനമാക്കിയുള്ള പ്രോജക്റ്റുകൾക്ക് അത്യാവശ്യമാണ്.

allowJs

TypeScript ഫയലുകൾക്കൊപ്പം JavaScript ഫയലുകളും കംപൈൽ ചെയ്യാൻ ഈ ഓപ്ഷൻ TypeScript കംപൈലറെ അനുവദിക്കുന്നു. ഒരു JavaScript പ്രോജക്റ്റിനെ TypeScript-ലേക്ക് മാറ്റുമ്പോൾ അല്ലെങ്കിൽ നിലവിലുള്ള JavaScript കോഡ്ബേസുകളിൽ പ്രവർത്തിക്കുമ്പോൾ ഇത് ഉപയോഗപ്രദമാകും.

ഉദാഹരണം:

            "compilerOptions": {
  "allowJs": true
}
            

              
                Copy
              
            
          

ഈ ഓപ്ഷൻ പ്രവർത്തനക്ഷമമാക്കുമ്പോൾ, കംപൈലർ .ts, .js ഫയലുകൾ പ്രോസസ്സ് ചെയ്യും.

checkJs

JavaScript ഫയലുകൾക്കായി ഈ ഓപ്ഷൻ ടൈപ്പ് പരിശോധന പ്രവർത്തനക്ഷമമാക്കുന്നു. allowJs-മായി ചേർന്ന്, നിങ്ങളുടെ JavaScript കോഡിലെ ടൈപ്പ് പിശകുകൾ കണ്ടെത്താൻ ഇത് TypeScript-നെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "allowJs": true,
  "checkJs": true
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ TypeScript, JavaScript ഫയലുകൾക്കായി ടൈപ്പ് പരിശോധന നൽകുന്നു.

jsx

React-ലും മറ്റ് ചട്ടക്കൂടുകളിലും ഉപയോഗിക്കുന്ന JSX സിൻ്റാക്‌സ് എങ്ങനെ മാറ്റണമെന്ന് ഈ ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. പൊതുവായ മൂല്യങ്ങളിൽ preserve, react, react-native, കൂടാതെ react-jsx എന്നിവ ഉൾപ്പെടുന്നു. preserve JSX സിൻ്റാക്‌സിനെ അതേപടി നിലനിർത്തുന്നു, react അതിനെ React.createElement കോളുകളാക്കി മാറ്റുന്നു, react-native React Native ഡെവലപ്‌മെൻ്റിനുള്ളതാണ്, കൂടാതെ react-jsx അതിനെ JSX ഫാക്ടറി ഫംഗ്ഷനുകളാക്കി മാറ്റുന്നു. react-jsxdev ഡെവലപ്‌മെൻ്റ് ആവശ്യങ്ങൾക്കുള്ളതാണ്.

ഉദാഹരണം:

            "compilerOptions": {
  "jsx": "react"
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ React പ്രോജക്റ്റുകൾക്ക് അനുയോജ്യമാണ്, JSX-നെ React.createElement കോളുകളാക്കി മാറ്റുന്നു.

declaration

ഈ ഓപ്ഷൻ നിങ്ങളുടെ TypeScript കോഡിനായി ഡിക്ലറേഷൻ ഫയലുകൾ (.d.ts) ഉണ്ടാക്കുന്നു. ഡിക്ലറേഷൻ ഫയലുകൾ നിങ്ങളുടെ കോഡിനായുള്ള ടൈപ്പ് വിവരങ്ങൾ നൽകുന്നു, ഇത് മറ്റ് TypeScript പ്രോജക്റ്റുകളെയോ JavaScript പ്രോജക്റ്റുകളെയോ ശരിയായ ടൈപ്പ് പരിശോധനയോടെ നിങ്ങളുടെ കോഡ് ഉപയോഗിക്കാൻ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "declaration": true
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ കംപൈൽ ചെയ്ത JavaScript ഫയലുകൾക്കൊപ്പം .d.ts ഫയലുകൾ ഉണ്ടാക്കും.

declarationMap

ഈ ഓപ്ഷൻ ഉണ്ടാക്കിയ ഡിക്ലറേഷൻ ഫയലുകൾക്കായി സോഴ്സ് മാപ്പ് ഫയലുകൾ (.d.ts.map) ഉണ്ടാക്കുന്നു. ഡിക്ലറേഷൻ ഫയലുകളിൽ പ്രവർത്തിക്കുമ്പോൾ, ഡിബഗ്ഗർമാരെയും മറ്റ് ടൂളുകളെയും യഥാർത്ഥ TypeScript സോഴ്സ് കോഡിലേക്ക് തിരികെ മാപ്പ് ചെയ്യാൻ സോഴ്സ് മാപ്പുകൾ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "declaration": true,
  "declarationMap": true
}
            

              
                Copy
              
            
          

sourceMap

ഈ ഓപ്ഷൻ കംപൈൽ ചെയ്ത JavaScript കോഡിനായി സോഴ്സ് മാപ്പ് ഫയലുകൾ (.js.map) ഉണ്ടാക്കുന്നു. ബ്രൗസറിലോ മറ്റ് പരിതസ്ഥിതികളിലോ ഡീബഗ് ചെയ്യുമ്പോൾ യഥാർത്ഥ TypeScript സോഴ്സ് കോഡിലേക്ക് തിരികെ മാപ്പ് ചെയ്യാൻ സോഴ്സ് മാപ്പുകൾ ഡിബഗ്ഗർമാരെയും മറ്റ് ടൂളുകളെയും അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "sourceMap": true
}
            

              
                Copy
              
            
          

outFile

ഈ ഓപ്ഷൻ എല്ലാ ഔട്ട്പുട്ട് ഫയലുകളും ഒരൊറ്റ ഫയലിലേക്ക് ചേർക്കുകയും പുറന്തള്ളുകയും ചെയ്യുന്നു. ബ്രൗസർ അടിസ്ഥാനമാക്കിയുള്ള ആപ്ലിക്കേഷനുകൾക്കായി കോഡ് ബണ്ടിൽ ചെയ്യാൻ ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "outFile": "dist/bundle.js"
}
            

              
                Copy
              
            
          

outDir

കംപൈൽ ചെയ്ത JavaScript ഫയലുകൾക്കായുള്ള ഔട്ട്പുട്ട് ഡയറക്‌ടറി ഈ ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, കംപൈലർ ഔട്ട്പുട്ട് ഫയലുകൾ സോഴ്സ് ഫയലുകൾ ഉള്ള അതേ ഡയറക്‌ടറിയിൽ സ്ഥാപിക്കും.

ഉദാഹരണം:

            "compilerOptions": {
  "outDir": "dist"
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ കംപൈൽ ചെയ്ത JavaScript ഫയലുകൾ dist ഡയറക്‌ടറിയിൽ സ്ഥാപിക്കും.

rootDir

ഈ ഓപ്ഷൻ TypeScript പ്രോജക്റ്റിൻ്റെ റൂട്ട് ഡയറക്‌ടറി വ്യക്തമാക്കുന്നു. മൊഡ്യൂൾ പേരുകൾ കണ്ടെത്താനും ഔട്ട്പുട്ട് ഫയൽ പാതകൾ ഉണ്ടാക്കാനും കംപൈലർ ഈ ഡയറക്‌ടറി ഉപയോഗിക്കുന്നു. സങ്കീർണ്ണമായ പ്രോജക്റ്റ് ഘടനകൾക്ക് ഇത് വളരെ ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

            "compilerOptions": {
  "rootDir": "src"
}
            

              
                Copy
              
            
          

removeComments

കംപൈൽ ചെയ്ത JavaScript കോഡിൽ നിന്ന് ഈ ഓപ്ഷൻ കമൻ്റുകൾ നീക്കം ചെയ്യുന്നു. ഇത് ഔട്ട്പുട്ട് ഫയലുകളുടെ വലുപ്പം കുറയ്ക്കാൻ സഹായിക്കും.

ഉദാഹരണം:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

noEmitOnError

ഏതെങ്കിലും ടൈപ്പ് പിശകുകൾ കണ്ടെത്തിയാൽ JavaScript ഫയലുകൾ പുറന്തള്ളുന്നതിൽ നിന്ന് ഈ ഓപ്ഷൻ കംപൈലറെ തടയുന്നു. ഇത് സാധുവായ കോഡ് മാത്രമേ ഉണ്ടാക്കുന്നുള്ളൂ എന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "noEmitOnError": true
}
            

              
                Copy
              
            
          

strict

ഈ ഓപ്ഷൻ എല്ലാ കർശനമായ ടൈപ്പ്-പരിശോധന ഓപ്ഷനുകളും പ്രവർത്തനക്ഷമമാക്കുന്നു. പുതിയ പ്രോജക്റ്റുകൾക്ക് ഇത് വളരെ ഉചിതമാണ്, കാരണം ഇത് സാധ്യമായ പിശകുകൾ കണ്ടെത്താനും മികച്ച രീതികൾ നടപ്പിലാക്കാനും സഹായിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "strict": true
}
            

              
                Copy
              
            
          

കർശനമായ മോഡ് പ്രവർത്തനക്ഷമമാക്കുന്നത് താഴെ പറയുന്ന ഓപ്ഷനുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നതിന് തുല്യമാണ്:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

esModuleInterop

ഈ ഓപ്ഷൻ CommonJS-നും ES മൊഡ്യൂളുകൾക്കുമിടയിൽ പരസ്പര പ്രവർത്തനക്ഷമത നൽകുന്നു. ES മൊഡ്യൂളുകളിൽ CommonJS മൊഡ്യൂളുകളും തിരിച്ചും ഇറക്കുമതി ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "esModuleInterop": true
}
            

              
                Copy
              
            
          

forceConsistentCasingInFileNames

ഈ ഓപ്ഷൻ ഫയലിൻ്റെ പേരുകളിൽ സ്ഥിരമായ കേസിംഗ് നടപ്പിലാക്കുന്നു. ചില ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങൾ കേസ് സെൻസിറ്റീവ് ആയിരിക്കുമ്പോൾ മറ്റു ചിലവ അല്ലാത്തതിനാൽ, ക്രോസ്-പ്ലാറ്റ്ഫോം അനുയോജ്യതയ്ക്ക് ഇത് പ്രധാനമാണ്.

ഉദാഹരണം:

            "compilerOptions": {
  "forceConsistentCasingInFileNames": true
}
            

              
                Copy
              
            
          

baseUrl ഉം paths ഉം

മൊഡ്യൂൾ റെസല്യൂഷൻ കോൺഫിഗർ ചെയ്യാൻ ഈ ഓപ്ഷനുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ആപേക്ഷികമല്ലാത്ത മൊഡ്യൂൾ പേരുകൾ കണ്ടെത്തുന്നതിനുള്ള അടിസ്ഥാന ഡയറക്‌ടറി baseUrl വ്യക്തമാക്കുന്നു, കൂടാതെ ഇഷ്ടമുള്ള മൊഡ്യൂൾ അപരനാമങ്ങൾ നിർവചിക്കാൻ paths നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@components/*": ["src/components/*"],
    "@utils/*": ["src/utils/*"]
  }
}
            

              
                Copy
              
            
          

@components/MyComponent, @utils/myFunction പോലുള്ള അപരനാമങ്ങൾ ഉപയോഗിച്ച് മൊഡ്യൂളുകൾ ഇറക്കുമതി ചെയ്യാൻ ഈ കോൺഫിഗറേഷൻ നിങ്ങളെ അനുവദിക്കുന്നു.

വിപുലമായ കോൺഫിഗറേഷൻ: അടിസ്ഥാനത്തിനപ്പുറം

ഇനി, നിങ്ങളുടെ TypeScript ഡെവലപ്‌മെൻ്റ് അനുഭവം കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയുന്ന ചില വിപുലമായ tsconfig.json ഓപ്ഷനുകൾ നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം.

ഇൻക്രിമെൻ്റൽ കംപൈലേഷൻ

TypeScript ഇൻക്രിമെൻ്റൽ കംപൈലേഷനെ പിന്തുണയ്ക്കുന്നു, ഇത് വലിയ പ്രോജക്റ്റുകൾക്കായുള്ള നിർമ്മാണ പ്രക്രിയയെ ഗണ്യമായി വേഗത്തിലാക്കാൻ കഴിയും. ഇൻക്രിമെൻ്റൽ കംപൈലേഷൻ പ്രവർത്തനക്ഷമമാക്കാൻ, incremental ഓപ്ഷൻ true ആയി സജ്ജീകരിക്കുക, കൂടാതെ ഒരു tsBuildInfoFile ഓപ്ഷൻ വ്യക്തമാക്കുക.

ഉദാഹരണം:

            "compilerOptions": {
  "incremental": true,
  "tsBuildInfoFile": ".tsbuildinfo"
}
            

              
                Copy
              
            
          

കംപൈലർ നിർമ്മാണ വിവരങ്ങൾ സംഭരിക്കുന്ന ഫയൽ tsBuildInfoFile ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. തുടർന്നുള്ള നിർമ്മാണ വേളയിൽ ഏതൊക്കെ ഫയലുകൾ വീണ്ടും കംപൈൽ ചെയ്യണമെന്ന് നിർണ്ണയിക്കാൻ ഈ വിവരങ്ങൾ ഉപയോഗിക്കുന്നു.

പ്രോജക്റ്റ് റഫറൻസുകൾ

ചെറുതും കൈകാര്യം ചെയ്യാവുന്നതുമായ പ്രോജക്റ്റുകളായി നിങ്ങളുടെ കോഡിനെ ഘടനാപരമാക്കാൻ പ്രോജക്റ്റ് റഫറൻസുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് വലിയ കോഡ്ബേസുകൾക്കായി നിർമ്മാണ സമയവും കോഡ് ഓർഗനൈസേഷനും മെച്ചപ്പെടുത്താനാകും. ഈ ആശയത്തിന് ഒരു നല്ല സാമ്യം ഒരു Microservice ആർക്കിടെക്ചറാണ് - ഓരോ സേവനവും സ്വതന്ത്രമാണ്, പക്ഷേ ഇക്കോ-സിസ്റ്റത്തിലെ മറ്റുള്ളവയെ ആശ്രയിക്കുന്നു.

പ്രോജക്റ്റ് റഫറൻസുകൾ ഉപയോഗിക്കുന്നതിന്, ഓരോ പ്രോജക്റ്റിനും നിങ്ങൾ ഒരു പ്രത്യേക tsconfig.json ഫയൽ ഉണ്ടാക്കണം. തുടർന്ന്, പ്രധാന tsconfig.json ഫയലിൽ, references ഓപ്ഷൻ ഉപയോഗിച്ച് റഫർ ചെയ്യേണ്ട പ്രോജക്റ്റുകൾ നിങ്ങൾക്ക് വ്യക്തമാക്കാൻ കഴിയും.

ഉദാഹരണം:

            {
  "compilerOptions": {
    ...
  },
  "references": [
    { "path": "./project1" },
    { "path": "./project2" }
  ]
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ നിലവിലെ പ്രോജക്റ്റ് ./project1, ./project2 ഡയറക്‌ടറികളിൽ സ്ഥിതി ചെയ്യുന്ന പ്രോജക്റ്റുകളെ ആശ്രയിച്ചിരിക്കുന്നുവെന്ന് വ്യക്തമാക്കുന്നു.

ഇഷ്ടമുള്ള ട്രാൻസ്ഫോർമറുകൾ

TypeScript കംപൈലറിൻ്റെ ഔട്ട്പുട്ട് മാറ്റാൻ ഇഷ്ടമുള്ള ട്രാൻസ്ഫോർമറുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ഇഷ്ടമുള്ള കോഡ് മാറ്റങ്ങൾ ചേർക്കുക, ഉപയോഗിക്കാത്ത കോഡ് നീക്കം ചെയ്യുക, അല്ലെങ്കിൽ പ്രത്യേക പരിതസ്ഥിതികൾക്കായി ഔട്ട്പുട്ട് ഒപ്റ്റിമൈസ് ചെയ്യുക തുടങ്ങിയ വിവിധ ആവശ്യങ്ങൾക്കായി ഇത് ഉപയോഗിക്കാം. അവ സാധാരണയായി i18n ഇൻ്റർനാഷണലൈസേഷൻ, ലോക്കലൈസേഷൻ ടാസ്‌ക്കുകൾക്കായി ഉപയോഗിക്കുന്നു.

ഇഷ്ടമുള്ള ട്രാൻസ്ഫോർമറുകൾ ഉപയോഗിക്കുന്നതിന്, കംപൈലർ വിളിക്കുന്ന ഒരു ഫംഗ്ഷൻ എക്‌സ്‌പോർട്ട് ചെയ്യുന്ന ഒരു പ്രത്യേക JavaScript ഫയൽ നിങ്ങൾ ഉണ്ടാക്കണം. തുടർന്ന്, tsconfig.json ഫയലിലെ plugins ഓപ്ഷൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ട്രാൻസ്ഫോർമർ ഫയൽ വ്യക്തമാക്കാൻ കഴിയും.

ഉദാഹരണം:

            {
  "compilerOptions": {
    ...
    "plugins": [
      { "transform": "./transformer.js" }
    ]
  }
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ ./transformer.js ഫയൽ ഇഷ്ടമുള്ള ട്രാൻസ്ഫോർമറായി ഉപയോഗിക്കണമെന്ന് വ്യക്തമാക്കുന്നു.

ഫയലുകൾ, ഉൾപ്പെടുത്തുക, ഒഴിവാക്കുക

compilerOptions-ന് അപ്പുറം, tsconfig.json-ലെ മറ്റ് റൂട്ട്-ലെവൽ ഓപ്ഷനുകൾ കംപൈലേഷൻ പ്രക്രിയയിൽ ഏതൊക്കെ ഫയലുകൾ ഉൾപ്പെടുത്തണമെന്ന് നിയന്ത്രിക്കുന്നു:

• files: കംപൈലേഷനിൽ ഉൾപ്പെടുത്താനുള്ള ഫയൽ പാതകളുടെ ഒരു അറേ.
• include: ഉൾപ്പെടുത്താനുള്ള ഫയലുകൾ വ്യക്തമാക്കുന്ന ഗ്ലോബ് പാറ്റേണുകളുടെ ഒരു അറേ.
• exclude: ഒഴിവാക്കാനുള്ള ഫയലുകൾ വ്യക്തമാക്കുന്ന ഗ്ലോബ് പാറ്റേണുകളുടെ ഒരു അറേ.

TypeScript കംപൈലർ പ്രോസസ്സ് ചെയ്യുന്ന ഫയലുകളിൽ ഈ ഓപ്ഷനുകൾ മികച്ച നിയന്ത്രണം നൽകുന്നു. ഉദാഹരണത്തിന്, ടെസ്റ്റ് ഫയലുകളോ ഉണ്ടാക്കിയ കോഡോ കംപൈലേഷൻ പ്രക്രിയയിൽ നിന്ന് നിങ്ങൾക്ക് ഒഴിവാക്കാം.

ഉദാഹരണം:

            {
  "compilerOptions": { ... },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ src ഡയറക്‌ടറിയിലെയും അതിൻ്റെ ഉപ ഡയറക്‌ടറികളിലെയും എല്ലാ ഫയലുകളും ഉൾക്കൊള്ളുന്നു, അതേസമയം node_modules, dist ഡയറക്‌ടറികളിലെ ഫയലുകളും .spec.ts എക്സ്റ്റൻഷനുള്ള ഏതെങ്കിലും ഫയലുകളും (സാധാരണയായി യൂണിറ്റ് ടെസ്റ്റുകൾക്കായി ഉപയോഗിക്കുന്നു) ഒഴിവാക്കുന്നു.

പ്രത്യേക സാഹചര്യങ്ങൾക്കുള്ള കംപൈലർ ഓപ്ഷനുകൾ

മികച്ച ഫലങ്ങൾ നേടുന്നതിന് വ്യത്യസ്ത പ്രോജക്റ്റുകൾക്ക് വ്യത്യസ്ത കംപൈലർ ക്രമീകരണങ്ങൾ ആവശ്യമായി വന്നേക്കാം. ഓരോന്നിനുമുള്ള ശുപാർശിത കംപൈലർ ക്രമീകരണങ്ങളും ചില പ്രത്യേക സാഹചര്യങ്ങളും നമുക്ക് നോക്കാം.

വെബ് ആപ്ലിക്കേഷൻ ഡെവലപ്‌മെൻ്റ്

വെബ് ആപ്ലിക്കേഷൻ ഡെവലപ്‌മെൻ്റിനായി, നിങ്ങൾ സാധാരണയായി താഴെ പറയുന്ന കംപൈലർ ക്രമീകരണങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

React അല്ലെങ്കിൽ സമാനമായ മറ്റ് ചട്ടക്കൂടുകൾ ഉപയോഗിക്കുന്ന ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾക്ക് ഈ ക്രമീകരണങ്ങൾ അനുയോജ്യമാണ്. അവ ഏറ്റവും പുതിയ ECMAScript ഫീച്ചറുകളെ ലക്ഷ്യമിടുന്നു, ES മൊഡ്യൂളുകൾ ഉപയോഗിക്കുന്നു, കൂടാതെ കർശനമായ ടൈപ്പ് പരിശോധന പ്രവർത്തനക്ഷമമാക്കുന്നു.

Node.js ബാക്കെൻഡ് ഡെവലപ്‌മെൻ്റ്

Node.js ബാക്കെൻഡ് ഡെവലപ്‌മെൻ്റിനായി, നിങ്ങൾ സാധാരണയായി താഴെ പറയുന്ന കംപൈലർ ക്രമീകരണങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

CommonJS മൊഡ്യൂൾ സിസ്റ്റം ഉപയോഗിക്കുന്ന Node.js ആപ്ലിക്കേഷനുകൾക്ക് ഈ ക്രമീകരണങ്ങൾ അനുയോജ്യമാണ്. അവ ഏറ്റവും പുതിയ ECMAScript ഫീച്ചറുകളെ ലക്ഷ്യമിടുന്നു, കർശനമായ ടൈപ്പ് പരിശോധന പ്രവർത്തനക്ഷമമാക്കുന്നു, കൂടാതെ JSON ഫയലുകൾ മൊഡ്യൂളുകളായി ഇറക്കുമതി ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ലൈബ്രറി ഡെവലപ്‌മെൻ്റ്

ലൈബ്രറി ഡെവലപ്‌മെൻ്റിനായി, നിങ്ങൾ സാധാരണയായി താഴെ പറയുന്ന കംപൈലർ ക്രമീകരണങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും:

            {
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

ബ്രൗസർ, Node.js പരിതസ്ഥിതികളിൽ ഉപയോഗിക്കാൻ കഴിയുന്ന ലൈബ്രറികൾ ഉണ്ടാക്കാൻ ഈ ക്രമീകരണങ്ങൾ അനുയോജ്യമാണ്. മെച്ചപ്പെട്ട ഡെവലപ്പർ അനുഭവത്തിനായി അവ ഡിക്ലറേഷൻ ഫയലുകളും സോഴ്സ് മാപ്പുകളും ഉണ്ടാക്കുന്നു.

TSConfig മാനേജ്മെൻ്റിനായുള്ള മികച്ച രീതികൾ

നിങ്ങളുടെ tsconfig.json ഫയലുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ ഓർമ്മിക്കേണ്ട ചില മികച്ച രീതികൾ ഇതാ:

• ഒരു അടിസ്ഥാന കോൺഫിഗറേഷനിൽ നിന്ന് ആരംഭിക്കുക: പൊതുവായ ക്രമീകരണങ്ങളുള്ള ഒരു അടിസ്ഥാന tsconfig.json ഫയൽ ഉണ്ടാക്കുക, തുടർന്ന് extends ഓപ്ഷൻ ഉപയോഗിച്ച് മറ്റ് പ്രോജക്റ്റുകളിൽ ഇത് വികസിപ്പിക്കുക.
• കർശനമായ മോഡ് ഉപയോഗിക്കുക: സാധ്യമായ പിശകുകൾ കണ്ടെത്താനും മികച്ച രീതികൾ നടപ്പിലാക്കാനും കർശനമായ മോഡ് പ്രവർത്തനക്ഷമമാക്കുക.
• മൊഡ്യൂൾ റെസല്യൂഷൻ കോൺഫിഗർ ചെയ്യുക: ഇറക്കുമതി പിശകുകൾ ഒഴിവാക്കാൻ മൊഡ്യൂൾ റെസല്യൂഷൻ ശരിയായി കോൺഫിഗർ ചെയ്യുക.
• പ്രോജക്റ്റ് റഫറൻസുകൾ ഉപയോഗിക്കുക: പ്രോജക്റ്റ് റഫറൻസുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡിനെ ചെറുതും കൂടുതൽ കൈകാര്യം ചെയ്യാവുന്നതുമായ പ്രോജക്റ്റുകളായി ഘടനാപരമാക്കുക.
• നിങ്ങളുടെ tsconfig.json ഫയൽ കാലികമായി നിലനിർത്തുക: നിങ്ങളുടെ tsconfig.json ഫയൽ പതിവായി അവലോകനം ചെയ്യുകയും നിങ്ങളുടെ പ്രോജക്റ്റ് വികസിക്കുമ്പോൾ അത് അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുക.
• നിങ്ങളുടെ tsconfig.json ഫയൽ പതിപ്പ് നിയന്ത്രിക്കുക: നിങ്ങളുടെ മറ്റ് സോഴ്സ് കോഡിനൊപ്പം നിങ്ങളുടെ tsconfig.json ഫയൽ പതിപ്പ് നിയന്ത്രണത്തിലേക്ക് മാറ്റുക.
• നിങ്ങളുടെ കോൺഫിഗറേഷൻ രേഖപ്പെടുത്തുക: ഓരോ ഓപ്ഷൻ്റെയും ഉദ്ദേശ്യം വിശദീകരിക്കുന്നതിന് നിങ്ങളുടെ tsconfig.json ഫയലിലേക്ക് കമൻ്റുകൾ ചേർക്കുക.

ഉപസംഹാരം: TypeScript കോൺഫിഗറേഷനിൽ പ്രാവീണ്യം നേടുക

TypeScript കംപൈലർ കോൺഫിഗർ ചെയ്യുന്നതിനും നിർമ്മാണ പ്രക്രിയ നിയന്ത്രിക്കുന്നതിനുമുള്ള ശക്തമായ ഉപകരണമാണ് tsconfig.json ഫയൽ. ലഭ്യമായ ഓപ്ഷനുകൾ മനസ്സിലാക്കുന്നതിലൂടെയും മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെയും, നിങ്ങളുടെ TypeScript പ്രോജക്റ്റുകളെ മികച്ച പ്രകടനത്തിനും പരിപാലനത്തിനും അനുയോജ്യതയ്ക്കും വേണ്ടി മികച്ച രീതിയിൽ ട്യൂൺ ചെയ്യാൻ കഴിയും. ഈ ഗൈഡ് tsconfig.json ഫയലിൽ ലഭ്യമായ വിപുലമായ ഓപ്ഷനുകളെക്കുറിച്ചുള്ള സമഗ്രമായ അവലോകനം നൽകിയിട്ടുണ്ട്, ഇത് നിങ്ങളുടെ TypeScript ഡെവലപ്‌മെൻ്റ് വർക്ക്ഫ്ലോയുടെ പൂർണ്ണ നിയന്ത്രണം ഏറ്റെടുക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു. ഏറ്റവും പുതിയ വിവരങ്ങൾക്കും മാർഗ്ഗനിർദ്ദേശങ്ങൾക്കുമായി ഔദ്യോഗിക TypeScript ഡോക്യുമെൻ്റേഷൻ എപ്പോഴും പരിശോധിക്കാൻ ഓർക്കുക. നിങ്ങളുടെ പ്രോജക്റ്റുകൾ വികസിക്കുന്നതിനനുസരിച്ച്, ഈ ശക്തമായ കോൺഫിഗറേഷൻ ടൂളുകളെക്കുറിച്ചുള്ള നിങ്ങളുടെ ധാരണയും ഉപയോഗവും വികസിക്കണം. സന്തോഷകരമായ കോഡിംഗ്!